<template>
  <div class="dt-help">
    <PublicMenu />
    <div class="dt-main">
      <!-- <nuxt v-if="isTabChat" /> -->
      <PublicTabs />
      <div class="dt-main-tabs-con">
        <!--projectstart-->
        <PmList v-if="isTab('pm-list').isRender" /><!--项目列表-->
        <PmAllCreate v-if="isTab('pm-create').isRender" /><!--创建项目三步-->
        <template v-for="item in tabsDetail">
          <PmAllDetail :key="item.hashName"
            v-if="isTab('pm-detail-' + rootProjectId).isRender && item.rootProjectId === rootProjectId" />
          <!--多个项目详情-->
        </template>
        <PmManaTemplate v-if="isTab('pm-mana-template').isRender" />
        <template v-for="item in tabsTemplate">
          <PmEditTemplate :key="item.hashName"
            v-if="isTab('pm-edit-template-' + templateId).isRender && item.templateId === templateId" />
          <!--多个模板详情-->
        </template>
        <!-- <template v-for="item in tabsDataDetail"> -->
        <!--PmDataDetail v-if="elTab==='3-0'&&item.rootProjectId===rootProjectId&&item.groupId===groupId" :key="item.hashName" /-->
        <!--多个项目资料详情-->
        <!-- </template> -->
        <PmAddOut v-if="isTab('pm-add-out').isRender" />
        <PmAddCk v-if="isTab('pm-add-ck').isRender" />

        <!--projectend-->

        <!--chatstart-->
        <!-- <keep-alive> -->
        <PcChat v-if="isTab('pc-chat').isRender"></PcChat>
        <!-- </keep-alive> -->
        <PcOrg v-if="isTab('pc-org').isRender"></PcOrg>
        <!--chatend-->

        <!--taskstart-->
        <WtList v-if="isTab('wt-list').isRender"></WtList>
        <!--taskend-->

        <!--approvestart-->
        <MaList v-if="isTab('ma-list').isRender"></MaList>
        <MaDetail v-if="isTab('ma-detail').isRender"></MaDetail>
        <!--approveend-->

        <!--memberstart-->
        <EmList v-if="isTab('em-list').isRender"></EmList>
        <EmImport v-if="isTab('em-import').isRender"></EmImport>
        <!--memberend-->
        <PublicDefaultLogo v-if="isShowDefaultLogo" />
        <PublicTaskCard :option="optTaskCard" ref="taskCard" />
        <nuxt />
      </div>
    </div>
    <PublicGuide :currStep="currStep" />
    <el-dialog custom-class="dt-guide-dialog dt-guide-start" :visible.sync="dialogVisible.guideStart"
      :append-to-body="true" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false"
      top="30vh">
      <div class="dt-guide-content">
        <h2>新手教程</h2>
        <p>通过教程，帮助您快速熟悉项目管理功能。</p>
        <div class="dt-guide-btn">
          <a href="javascript:void(0);" @click="startGuide">开始</a>
          <a href="javascript:void(0)" @click="quitGuide">跳过</a>
        </div>
        <div class="dt-guide-img"><img src="/skb/img/guide/ic_begin264.png" alt="" /></div>
      </div>
    </el-dialog>
    <el-dialog custom-class="dt-guide-dialog dt-guide-end" :visible.sync="dialogVisible.guideEnd" :append-to-body="true"
      :close-on-click-modal="false" :show-close="false" top="30vh">
      <div class="dt-guide-content">
        <h2>恭喜，您已完成全部教程！</h2>
        <p>项目内所有的任务都显示在这里，您可以查看项目总体任务情况。</p>
        <div class="dt-guide-btn">
          <a href="javascript:void(0);" @click="quitGuide">确定</a>
        </div>
        <div class="dt-guide-img"><img src="/skb/img/guide/ic_end250.png" alt="" /></div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { initSocket } from '../plugins/socket-io'
export default {
  head() {
    return {
      script: [
        {
          //天翼云
          type: 'text/javascript',
          src: 'https://www.ccccdt.com/skb/js/oos-sdk-6.0.min.js',
          body: false
        }
      ]
    }
  },
  data() {
    return {
      uid: this.$tools.getDecrypt(this.$store.state.uid), //用户id
      secret_uid: this.$store.state.uid,
      optTaskCard: {
        isShow: false,
        mode: '',
        rootProjectId: '',
        rootProjectName: '',
        nodeId: '',
        taskId: '',
        startTime: '',
        endTime: '',
        source: '',
        random: ''
      },
      currStep: -1,
      dialogVisible: { guideStart: false, guideEnd: false }
    }
  },
  computed: {
    tabs() {
      return this.$tools.getTabs(this, this.secret_uid)
    },
    hashName() {
      return this.$tools.getHashName(this)
    },
    fullPath() {
      return this.$route.fullPath
    },
    isShowDefaultLogo() {
      return !this.tabs.length
    },
    elTab() {
      return this.$tools.getQuery(this).elTab
    },
    rootProjectId() {
      return this.$tools.getQuery(this).rootProjectId
    },
    templateId() {
      return this.$tools.getQuery(this).templateId
    },
    groupId() {
      return this.$tools.getQuery(this).groupId
    },
    //项目详情多标签
    tabsDetail() {
      return this.tabs.filter((item) => {
        var reg = /^pm-detail-\d{1,5}$/
        return reg.test(item.hashName)
      })
    },
    //模板详情多标签
    tabsTemplate() {
      return this.tabs.filter((item) => {
        var reg = /^pm-edit-template-\d{1,5}$/
        return reg.test(item.hashName)
      })
    },
    //项目资料详情多标签匹配
    tabsDataDetail() {
      return this.tabs.filter((item) => {
        var reg = /^pm-detail-\d{1,5}-\d{1,5}$/
        return reg.test(item.hashName)
      })
    },
    query() {
      return this.$tools.getQuery(this)
    },
    autoShowGuide() {
      return this.$store.state.demo
    }
  },
  methods: {
    //单标签是否渲染、显示
    isTab(hashName) {
      var isRender = this.tabs.some((item) => {
        return item.hashName === hashName && item.hashName === this.hashName
      })
      return { isRender: isRender }
    },
    loadTabs() {
      this.$tools.setTabs(this, this.secret_uid, 'open', {
        hashName: this.hashName,
        elTab: this.elTab,
        fullPath: this.fullPath,
        rootProjectId: this.rootProjectId,
        templateId: this.templateId,
        groupId: this.groupId
      })
    },
    startGuide() {
      this.dialogVisible.guideStart = false
      this.currStep = 0
    },
    quitGuide() {
      this.dialogVisible.guideStart = false
      this.dialogVisible.guideEnd = false
      this.currStep = -1
      this.signGuide()
    },
    signGuide() {
      //标记关闭引导不在自动打开
      var data = [{ userId: this.uid }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/project/completeBeginnerGuide'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.$cookies.set('demo', false, { path: '/', maxAge: 60 * 60 * 24 })
              this.$store.commit('setDemo', false)
            }
          })
        })
        .catch((error) => { })
    }
  },
  asyncData(context) {
    var uid = context.$tools.getDecrypt(context.store.state.uid),
      data = [{ user_id: uid }],
      domain = [context.store.state.USER_DOMAIN],
      path = ['/phoneapi/get_user_info_2019'],
      dataAxios = context.$tools.getDataAxios(context, domain, path, data)

    return Promise.all(dataAxios)
      .then((response) => {
        return context.$tools.callbackAxios(context, response, (response) => {
          var data = response[0].data,
            returnData = {}

          if (data.code === 200) {
            //刷新cookie续24小时
            if (process.env.NODE_ENV == 'development') context.$cookies.set('uid', context.$cookies.get('uid'), { path: '/', maxAge: 60 * 60 * 24 })
            else context.$cookies.set('uid', context.$cookies.get('uid'), { /*domain: '.ccccdt.com',*/ path: '/', maxAge: 60 * 60 * 24 })

            context.$cookies.set('uphone', context.$cookies.get('uphone'), { path: '/', maxAge: 60 * 60 * 24 })
            context.$cookies.set('guid', context.$cookies.get('guid'), { path: '/', maxAge: 60 * 60 * 24 })
            context.$cookies.set('uname', context.$cookies.get('uname'), { path: '/', maxAge: 60 * 60 * 24 })

            context.$cookies.set('head_img', data.data.head_img, { path: '/', maxAge: 60 * 60 * 24 })
            context.$cookies.set('ubind', data.data.ccshcc_user_name_need_bind ? 'false' : 'true', { path: '/', maxAge: 60 * 60 * 24 })
            context.$cookies.set('userinfo', data.data.cookie, { path: '/', maxAge: 60 * 60 * 24 })
            context.$cookies.set('manager', data.data.is_person_company, { path: '/', maxAge: 60 * 60 * 24 })
            context.$cookies.set('demo', data.data.is_demo_showed === 0, { path: '/', maxAge: 60 * 60 * 24 })

            context.store.commit('setUname', encodeURIComponent(data.data.ccshcc_user_name))
            context.store.commit('setHeadImg', encodeURIComponent(data.data.head_img))
            context.store.commit('setManager', encodeURIComponent(data.data.is_person_company))
            context.store.commit('setIsCompanyUser', data.data.is_person_company === 2)
            context.store.commit('setDemo', data.data.is_demo_showed === 0)
          }
          return returnData
        })
      })
      .catch((error) => { })
  },
  watch: {
    //路由hash变化 加载组件
    $route(to, from) {
      if (to.hash !== from.hash) {
        this.loadTabs()
      }
    }
  },
  mounted() {
    //页面加载 加载组件
    this.loadTabs()
    //全局监听任务卡片
    this.$root.$on('openTaskCard', (option) => {
      this.optTaskCard.mode = option.mode
      this.optTaskCard.rootProjectId = option.rootProjectId
      this.optTaskCard.rootProjectName = option.rootProjectName
      this.optTaskCard.nodeId = parseInt(option.nodeId) || ''
      this.optTaskCard.startTime = option.startTime || ''
      this.optTaskCard.endTime = option.endTime || ''
      this.optTaskCard.taskId = option.taskId || ''
      this.optTaskCard.source = option.source
      this.optTaskCard.random = Math.random() //随机数触发监听
    })
    //关闭任务卡片
    //this.$root.$on('closeTaskCard', () => {
    // if (this.$refs.taskCard) {
    //   this.$refs.taskCard.closeTaskForm()
    // }
    //})

    this.$root.$on('demoPid', () => {
      //有演示项目
      if (this.autoShowGuide && this.currStep === -1) {
        //如果还没关闭过
        this.dialogVisible.guideStart = true
      }
    })
    //全局监听新手引导
    this.$root.$on('guide-to-start', () => {
      this.currStep = -1
      this.dialogVisible.guideStart = true
    })
    this.$root.$on('guide-to-close', () => {
      this.currStep = -1
      this.signGuide()
    })
    this.$root.$on('guide-to-0', () => {
      this.currStep = 0
    })
    this.$root.$on('guide-to-1', () => {
      this.currStep = 1
    })
    this.$root.$on('guide-to-2', () => {
      this.currStep = 2
    })
    this.$root.$on('guide-to-3', () => {
      this.currStep = 3
    })
    this.$root.$on('guide-to-4', () => {
      this.currStep = 4
    })
    this.$root.$on('guide-to-5', () => {
      this.currStep = 5
    })
    this.$root.$on('guide-to-6', () => {
      this.currStep = 6
    })
    this.$root.$on('guide-to-7', () => {
      this.currStep = 7
    })
    this.$root.$on('guide-to-8', () => {
      this.currStep = 8
    })
    this.$root.$on('guide-to-9', () => {
      this.currStep = 9
    })
    this.$root.$on('guide-to-10', () => {
      this.currStep = 10
    })
    this.$root.$on('guide-to-11', () => {
      this.currStep = 11
    })
    this.$root.$on('guide-to-12', () => {
      this.currStep = 12
    })
    this.$root.$on('guide-to-13', () => {
      this.currStep = 13
    })
    this.$root.$on('guide-to-14', () => {
      this.currStep = 14
    })
    this.$root.$on('guide-to-15', () => {
      this.currStep = 15
    })
    this.$root.$on('guide-to-16', () => {
      this.currStep = 16
    })
    this.$root.$on('guide-to-17', () => {
      this.currStep = 17
    })
    this.$root.$on('guide-to-18', () => {
      this.currStep = 18
    })
    this.$root.$on('guide-to-end', () => {
      this.dialogVisible.guideEnd = true
      this.currStep = -1
      this.signGuide()
    })
    /**************guide end*******************/
    initSocket(this.$store)

    console.log('process.env.NODE_ENV ==========', process.env.NODE_ENV)
  },
  fetch() {
    if (!window.electron) {
      console.log('请在electron环境下运行')
      this.$setTitle('数科帮网页版')
    }
  }
}
</script>
<style>
.dt-main-tabs-con {
  background: #f2f3f5;
}

.dt-hide {
  width: 0;
  height: 0;
  overflow: hidden;
  position: absolute;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
}

.dt-help {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
}

.dt-main {
  flex: 1;
  display: flex;
  overflow: auto;
  flex-direction: column;
}

.dt-main-tabs-con {
  flex: 1;
  display: flex;
  overflow: auto;
}

/*************************************************子组件公共样式****************************************************/
.dt-main-tabs-content {
  flex: 1;
  display: flex;
  overflow: auto;
}

.dt-content-left {
  width: 280px;
  border-right: 1px solid #e1e6f0;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  overflow: auto;
  overflow-x: hidden;
}

.dt-chat-groups {
  display: flex;
  flex-direction: column;
}

.dt-groups-title {
  height: 50px;
  border-bottom: 1px solid #e1e6f0;
  line-height: 50px;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
}

.dt-groups-title span {
  color: #1f1f1f;
}

.dt-groups-title i {
  margin-top: 18px;
  cursor: pointer;
}

.dt-groups-list {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.dt-content-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #f2f3f5;
  overflow: auto;
}

.dt-content-head {
  background-color: #fff;
}

.dt-content-head-tab {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #e9eef7;
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
}

.dt-head-title {
  /* width: 400px; */
  display: flex;
  font-size: 16px;
}

.dt-head-title>span {
  font-size: 16px;
}

.dt-head-breadcrumb {
  cursor: pointer;
}

.dt-head-breadcrumb span {
  font-size: 14px;
}

.dt-head-breadcrumb i {
  color: #1f1f1f;
  font-size: 16px;
}

.dt-head-breadcrumb em {
  font-size: 16px;
  margin: 0 15px;
  color: #e9eef7;
}

.dt-head-tabs {
  flex: 1;
}

.dt-head-tabs .el-tabs__nav-wrap::after {
  display: none;
}

.dt-head-tabs .el-tabs__nav-scroll {
  display: flex;
  justify-content: space-around;
}

.dt-head-right {
  width: 400px;
  text-align: right;
}

.dt-content-head-query {
  height: 28px;
  padding: 6px 16px;
  display: flex;
  justify-content: space-between;
}

.dt-head-search>.el-select {
  width: 280px;
}

.dt-head-search>.el-input {
  width: 380px;
}

.dt-head-search .el-input__inner {
  border-radius: 0;
}

.dt-content-page {
  display: flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  flex: 1;

  margin: 16px;
  background-color: #fff;
  overflow: auto;
}

.dt-content-page .dt-pmDetail-info {
  display: flex;
  flex-direction: column;
  -webkit-flex-direction: column;
}

.dt-content-bottom {
  height: 36px;
  padding: 20px 16px;
  background-color: #fff;
  border-top: 1px solid #e9eef7;
  text-align: center;
}

/* 审批记录 */
.el-card__body {
  padding: 8px 12px;
}

/* .el-card .mt8 {
  margin-top: 8px;
} */
.dt-content-progress-right-approval-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.dt-content-progress-right-approval-title p:nth-of-type(1) {
  font-size: 14px;
  color: #1f1f1f;
}

.dt-content-progress-right-approval-title p:nth-of-type(2) {
  font-size: 12px;
  color: #1f1f1f;
}

.dt-content-progress-right-approval-title p:nth-of-type(2) em {
  color: #606266;
}

/* 创建项目和项目详情 */
.el-popover.dt-card-popover {
  min-width: 80px !important;
  padding: 4px 0px !important;
}

.el-timeline-item {
  padding: 3px 0 12px;
}

.el-timeline-item__tail {
  left: 5px;
}

.el-timeline-item__node--normal {
  left: 0;
}

.el-card__body p {
  font-size: 12px;
}

.el-card__body p:nth-child(1) {
  margin-bottom: 8px;
}

.el-card__body p:nth-child(2) {
  margin-bottom: 0;
}

body .el-message-box__status+.el-message-box__message {
  padding-left: 36px;
}

/*****组织架构递归样式******/
.dt-org-box {
  display: flex;
}

.dt-org-self {
  width: 286px;
  height: 86px;
  padding: 16px 18px 16px 14px;
  border: 1px solid #e9eef7;
  position: relative;
  top: 0;
  margin-bottom: 10px;
  margin-right: 100px;
  background-color: #fff;
  cursor: pointer;
}

.dt-org-self.is-slide {
  height: 16px;
}

.dt-org-self.dt-org-self-cooprate {
  background-color: #fffbe6;
  border-color: #fff1b8;
}

.dt-org-self.dt-org-self-cooprate .dt-org-title em {
  background-color: #fff1b8;
  color: #faad14;
}

.dt-org-self.dt-org-self-major {
  background-color: #f0f5ff;
  border-color: #d6e4ff;
}

.dt-org-self::before {
  width: 50px;
  height: 1px;
  background-color: #ced2db;
  position: absolute;
  left: -51px;
  top: 60px;
  content: '';
}

.dt-org-self::after {
  width: 50px;
  height: 1px;
  background-color: #ced2db;
  position: absolute;
  right: -51px;
  top: 60px;
  content: '';
}

.dt-org-self-root.dt-org-self::before,
.dt-org-self-leaf.dt-org-self::after {
  width: 0;
}

.dt-org-children {
  position: relative;
}

.dt-org-title {
  margin-bottom: 8px;
  position: relative;
  height: 20px;
  line-height: 20px;
}

.dt-org-title em {
  font-size: 12px;
  background-color: #f2f3f5;
  color: #606266;
  padding: 2px 5px;
  border-radius: 2px;
  vertical-align: 5px;
}

.dt-org-title span {
  font-weight: bold;
  color: #1f1f1f;
  width: 270px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dt-org-title span.w200 {
  width: 200px;
}

.dt-org-title i {
  position: absolute;
  right: 0;
  top: 0;
  color: #909399;
  transition: transform 0.3s ease 0s;
}

.dt-org-title i:hover {
  color: #2f54eb;
}

.dt-org-self.is-slide::before,
.dt-org-self.is-slide::after {
  top: 24px;
}

.dt-org-self.is-slide .dt-org-title i {
  transform: rotate(180deg);
  transition: transform 0.3s ease 0s;
}

.dt-org-self.is-slide .dt-org-add,
.dt-org-self.is-slide .dt-org-slide {
  top: 14px;
}

.dt-org-item {
  font-size: 12px;
  color: #606266;
}

.dt-org-item p {
  margin-bottom: 10px;
}

.dt-org-add {
  position: absolute;
  right: -10px;
  top: 50px;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
}

.dt-org-add i {
  padding: 3px;
  font-size: 14px;
  color: #fff;
  background-color: #2f54eb;
}

.dt-org-add i:hover {
  background-color: #597ef7;
}

.dt-org-menu {
  position: absolute;
  right: 18px;
  bottom: 15px;
}

.dt-org-menu i {
  font-size: 16px;
  color: #909399;
}

.dt-org-menu i:hover {
  color: #2f54eb;
}

.dt-org-slide {
  position: absolute;
  right: -62px;
  top: 50px;
  border-radius: 50%;
  overflow: hidden;
  z-index: 10;
  transition: transform 0.2s ease 0s;
}

.dt-org-slide i {
  padding: 3px;
  font-size: 14px;
  color: #fff;
  background-color: #2f54eb;
  transition: transform 0.3s ease 0s;
}

.dt-org-slide i:hover {
  background-color: #597ef7;
}

.dt-org-slide i.is-slide {
  transform: rotate(180deg);
  transition: transform 0.3s ease 0s;
}

.dt-org-line {
  width: 1px;
  height: 0;
  background-color: #ced2db;
  position: absolute;
  left: -51px;
}

.dt-org-self-person {
  padding: 8px 12px 8px 0;
  height: 32px;
  width: 306px;
}

.dt-org-self-person::before,
.dt-org-self-person::after {
  top: 24px;
}

.dt-org-person {
  height: 32px;
  display: flex;
}

.dt-org-person-name {
  color: #1f1f1f;
  line-height: 32px;
  width: 90px;
}

.dt-org-person-name b {
  border-left: 4px solid #2f54eb;
  padding-left: 8px;
}

.dt-org-person-value {
  width: 117px;
  padding-left: 12px;
  border-left: 1px solid #e9eef7;
  font-size: 12px;
  padding-top: 2px;
}

.dt-org-person-task {
  width: 67px;
  padding-left: 12px;
  border-left: 1px solid #e9eef7;
  font-size: 12px;
  padding-top: 2px;
}

.dt-org-person-value span em,
.dt-org-person-task span em {
  color: #909399;
  display: block;
  margin-bottom: 7px;
}

.dt-org-person-value span i {
  color: #1f1f1f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 80px;
  display: inline-block;
}

.dt-org-person-task span i {
  color: #1f1f1f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 110px;
  display: inline-block;
}

.dt-org-person-task i.el-icon-arrow-right {
  position: absolute;
  right: 8px;
  top: 19px;
  color: #909399;
}

.dt-org-person-task i.el-icon-arrow-right:hover {
  color: #2f54eb;
}

.el-dropdown-menu li i {
  width: 8px;
  height: 8px;
  border-radius: 8px;
  display: inline-block;
}

.dt-dot-0 {
  background-color: #c0c4cc;
}

.dt-dot-1 {
  background-color: #ffe58f;
}

.dt-dot-2 {
  background-color: #adc6ff;
}

/*输入框艾特样式*/
/* .tribute-container {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  max-height: 200px;
  max-width: 500px;
  overflow: auto;
  display: block;
  z-index: 999999;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(#000, 0.13);
}
.tribute-container ul {
  margin: 0;
  margin-top: 2px;
  padding: 0;
  list-style: none;
  background: #fff;
  border-radius: 4px;
  border: 1px solid rgba(#000, 0.13);
  background-clip: padding-box;
  overflow: hidden;
}
.tribute-container li {
  color: #3f5efb;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 14px;
}
.tribute-container li.highlight,
.tribute-container li:hover {
  background: #3f5efb;
  color: #fff;
}
.tribute-container li span {
  font-weight: bold;
}
.tribute-container li.no-match {
  cursor: default;
}
.tribute-container .menu-highlighted {
  font-weight: bold;
} */

/*********************重写input textarea部分样式************************/
.el-textarea {
  border: 1px solid #dcdfe6;
  padding-bottom: 30px;
  box-sizing: border-box;
}

.el-textarea:hover {
  border-color: #c0c4cc;
}

.el-textarea.is-focus {
  border-color: #2f54eb;
}

.el-textarea.is-disabled,
.el-textarea.is-disabled:hover {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
}

.el-textarea__inner {
  resize: none;
  border: 0;
}

.el-input-group__append,
.el-input-group__prepend,
.el-input__inner,
.el-textarea__inner {
  border-radius: 0;
}

.el-input-group__prepend {
  background-color: #fff;
}

.el-textarea .el-input__count {
  bottom: 10px;
  height: 12px;
  line-height: 12px;
}

/****分页****/
.el-pagination {
  text-align: center;
}

/**table**/
.el-table tr {
  cursor: pointer;
}

.el-table .postpone-row,
.el-table.el-table--enable-row-hover .el-table__body tr.postpone-row:hover>td.el-table__cell {
  background: #fff0f0;
}

.el-table .advance-row,
.el-table.el-table--enable-row-hover .el-table__body tr.advance-row:hover>td.el-table__cell {
  background: #f6ffed;
}

/* .el-table .warning-row,
.el-table.el-table--enable-row-hover .el-table__body tr.warning-row:hover > td.el-table__cell {
  background: oldlace;
}
.el-table .success-row,
.el-table.el-table--enable-row-hover .el-table__body tr.success-row:hover > td.el-table__cell {
  background: #f0f9eb;
} */
.dt-button-cancle {
  float: right;
  margin-left: 10px;
}

/* 私域聊天添加群聊下拉框样式 */
.dt-caht-addGroup {
  top: 60px !important;
  left: 312px !important;
}

/* 私域聊天回执消息添加参与人下拉框样式 */
.dt-receipt-content-select {
  width: 280px !important;
  min-width: 280px !important;
}

.dt-receipt-content-select .el-select-dropdown__list .el-input {
  padding: 0 20px !important;
  box-sizing: border-box;
  margin: 5px 0;
}

.dt-receipt-content-empty .el-input .el-input__suffix .el-input__validateIcon,
.dt-receipt-content-select .el-select-dropdown__list .el-input__suffix .el-input__validateIcon {
  display: none !important;
}

.dt-receipt-content-empty .el-input .el-input__suffix .el-icon-search,
.dt-receipt-content-select .el-select-dropdown__list .el-input__suffix .el-icon-search {
  cursor: pointer;
}

.dt-receipt-content-empty .el-input .el-input__suffix .el-icon-search:hover,
.dt-receipt-content-select .el-select-dropdown__list .el-input__suffix .el-icon-search:hover {
  color: #5976ef;
}

.dt-receipt-content-select .el-select-dropdown__list .el-input .el-input__suffix {
  right: 20px;
}

/* 私域聊天回执消息添加参与人下拉框样式 */
/* 回执消息文本超出之后的文字提示信息 */
.el-tooltip__popper {
  max-width: 80%;
}

.el-tooltip__popper.is-light[x-placement^='top'] .popper__arrow {
  border-top-color: #e5e5e5;
}

/* 回执消息文本超出之后的文字提示信息 */
/* 弹出确认框样式修改 让icon图标顶部对齐 */
.dt-chat-content-link-confirm .el-message-box__status {
  top: 0;
  transform: translateY(0);
}

/* 创建群聊按钮样式修改 改成一样大小 */
.dt-add-group .dialog-footer .dt-add-group-cancel {
  padding: 10px 32px;
}

/*****************新用户引导*************************/
/* .driver-popover {
  width: 325px;
  max-width: 325px;
}
.driver-popover-footer .driver-popover-navigation-btns button {
  line-height: 1;
  text-shadow: 0 0 0 transparent;
  padding: 7px 11px;
  overflow: hidden;
}
.driver-popover-footer .driver-popover-navigation-btns .driver-popover-next-btn {
  border-color: #2f54eb;
  background-color: #2f54eb;
  color: #fff;
}
.driver-popover-footer .driver-popover-navigation-btns .driver-popover-prev-btn:hover {
  background-color: #f2f3f5;
}

.driver-popover-footer .driver-popover-navigation-btns .driver-popover-next-btn:hover {
  background-color: #5976ef;
} */
/*****************新用户引导*************************/
.el-dialog__wrapper .dt-guide-dialog {
  width: 560px;
  border-radius: 20px;
}

.el-dialog__wrapper .dt-guide-start {
  height: 246px;
  background: url(/skb/img/guide/bg_560x246.png) no-repeat scroll 0 0;
}

.el-dialog__wrapper .dt-guide-end {
  height: 268px;
  background: url(/skb/img/guide/bg_560x268.png) no-repeat scroll 0 0;
}

.el-dialog__wrapper .dt-guide-dialog .el-dialog__body {
  padding: 40px 200px 40px 50px;
}

.dt-guide-content {
  color: #fff;
  position: relative;
}

.dt-guide-content h2 {
  font-size: 24px;
  font-weight: normal;
  margin-bottom: 23px;
}

.dt-guide-content p {
  line-height: 1.5;
  margin-bottom: 30px;
}

.dt-guide-btn a {
  width: 88px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  display: inline-block;
  border: 1px solid #fff;
  border-radius: 4px;
}

.dt-guide-btn a:nth-child(1) {
  background-color: #fff;
  color: #2f54eb;
  margin-right: 5px;
}

.dt-guide-btn a:nth-child(1):hover {
  background-color: #f2f3f5;
}

.dt-guide-btn a:nth-child(2) {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

.dt-guide-btn a:nth-child(2):hover {
  background-color: #adc6ff;
}

.dt-guide-start .dt-guide-img {
  width: 264px;
  height: 250px;
  position: absolute;
  right: -218px;
  top: -140px;
}

.dt-guide-end .dt-guide-img {
  width: 264px;
  height: 250px;
  position: absolute;
  right: -230px;
  top: -140px;
}

.dt-content-em-delete .el-message-box__header {
  padding-bottom: 0px;
}

.dt-content-em-delete .el-message-box__content {
  padding-top: 14px;
  padding-bottom: 18px;
}

.dt-content-em-delete-content>p>span {
  display: flex;
  align-items: center;
  color: rgba(96, 98, 102, 1);
  font-size: 14px;
}

.dt-content-em-delete-content>p:nth-of-type(2)>span {
  padding-left: 29px;
  color: rgba(144, 147, 153, 1);
  font-size: 12px;
}

.dt-content-em-delete-content .el-icon-warning {
  font-size: 22px;
  color: #faad14;
  margin-right: 7px;
}
</style>
